<template>
  <a-modal v-model="visible" title="新增组" :maskClosable="false" centered @ok="submit">
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-form-model-item label="新增组数" prop="groupNum">
        <a-input-number v-model="form.groupNum" :min="1" :precision="0" />
        <!-- <div class="fz-12" style="color: #999;">默认初始配置每组10个数量,创建后可修改</div> -->
      </a-form-model-item>
      <a-form-model-item label="每组座位数" prop="seatNum">
        <a-input-number v-model="form.seatNum" :min="1" :precision="0" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      form: {
        groupNum: 1,
        seatNum: 10
      },
      rules: {
        groupNum: [{ required: true, message: '请输入新增组数', trigger: 'change' }],
        seatNum: [{ required: true, message: '请输入每组座位数', trigger: 'change' }]
      }
    }
  },
  methods: {
    openModel(seatNum) {
      this.form.seatNum = seatNum
      this.visible = true
    },
    closeModel() {
      this.visible = false
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', this.form)
        }
      })
    }
  }
}
</script>

<style></style>
